<template>
  <div class="map-view">
    <LineChart @changeBtn="v => emit('changeBtn', v)" />
  </div>
</template>

<script setup name="MapView">
import { randomLenNum } from '@/utils/index.js'
import { getZyCentorData } from '@/api/base.js'
import LineChart from './LineChart.vue'

import useAppStore from '@/store/modules/app'

const emit = defineEmits(['changeBtn'])

const appStore = useAppStore()
const list = ref([])
const clickList = [
  {
    goPath: '/burden',
    chartDefault: {
      '/wind-farm': {
        left: ['206'],
        right: ['98']
      },
      '/dispatch': {
        left: ['10'],
        right: ['206']
      },
      '/receive': {
        left: ['79'],
        right: ['91']
      },
      '/burden': {
        left: ['204'],
        right: ['85', '86', '87']
      }
    }
  },
  {
    goPath: '/receive',
    chartDefault: {
      '/wind-farm': {
        left: ['98', '106', '114', '122'],
        right: ['99', '100', '101']
      },
      '/dispatch': {
        left: ['6', '31', '56'],
        right: ['12', '13', '14']
      },
      '/receive': {
        left: ['82'],
        right: ['81']
      },
      '/burden': {
        left: ['204'],
        right: ['85', '86', '87']
      }
    }
  },
  {
    goPath: '/wind-farm',
    chartDefault: {
      '/wind-farm': {
        left: ['209'],
        right: ['210']
      },
      '/dispatch': {
        left: ['6'],
        right: ['8']
      },
      '/receive': {
        left: ['83'],
        right: ['81']
      },
      '/burden': {
        left: ['204'],
        right: ['85', '86', '87']
      }
    }
  },
  {
    goPath: '/dispatch',
    chartDefault: {
      '/wind-farm': {
        left: ['98', '106', '114', '122'],
        right: ['99', '100', '101']
      },
      '/dispatch': {
        left: ['18', '43', '68'],
        right: ['6', '31', '56']
      },
      '/receive': {
        left: ['79'],
        right: ['91']
      },
      '/burden': {
        left: ['204'],
        right: ['85', '86', '87']
      }
    }
  },
  {
    goPath: '/wind-farm',
    chartDefault: {
      '/wind-farm': {
        left: ['211', '212'],
        right: ['102', '103', '104']
      },
      '/dispatch': {
        left: ['22', '23'],
        right: ['15', '16', '17']
      },
      '/receive': {
        left: ['79'],
        right: ['91']
      },
      '/burden': {
        left: ['204'],
        right: ['85', '86', '87']
      }
    }
  }
]
// const list = ref(Array.from({ length: 15 }, (v, i) => randomLenNum(3)))

// getZyCentorData(null).then((res) => {
//   if (res.code == '0000') {
//     list.value = res.data
//   }
// });

const goPage = ({ goPath, chartDefault }) => {
  console.log(goPath, chartDefault)
}

const init = () => {
  const time = appStore.timePoint
  // 模拟接口获取数据
  getZyCentorData({ time: time }).then(res => {
    if (res.code == '0000') {
      list.value = res.data
    }
  })
}

init()
watch(
  () => appStore.timePoint,
  () => {
    init()
  }
)
</script>

<style lang="scss" scoped>
.map-view {
  width: 100%;
  height: 100%;
  .bg {
    width: 100%;
    height: 100%;
  }
  .map-view-img {
    width: 53%;
    height: 100%;
    position: relative;
    img {
      display: block;
      width: 100%;
      height: 100%;
    }
    .click-item {
      width: 100px;
      height: 100px;
      // border: 1px solid red;
      position: absolute;
      top: 0%;
      left: 0%;
      cursor: pointer;
      &:nth-of-type(1) {
        left: 2%;
        top: 39%;
        height: 179px;
      }
      &:nth-of-type(2) {
        left: 17%;
        top: 43%;
        height: 125px;
      }
      &:nth-of-type(3) {
        left: 30%;
        top: 51%;
        height: 48px;
        width: 322px;
      }
      &:nth-of-type(4) {
        left: 67%;
        top: 11%;
        height: 81%;
      }
      &:nth-of-type(5) {
        left: 83%;
        top: 6%;
        height: 81%;
        width: 15%;
      }
    }
  }

  .value {
    font-size: 24px;
    font-weight: bold;
    position: absolute;
    color: #fff;
    left: 0%;
    top: 0%;

    &:nth-of-type(1) {
      left: 57%;
      top: 28%;
    }

    &:nth-of-type(2) {
      left: 70%;
      top: 24%;
    }

    &:nth-of-type(3) {
      left: 72%;
      top: 27%;
    }

    &:nth-of-type(4) {
      left: 72%;
      top: 31%;
    }

    &:nth-of-type(5) {
      left: 67%;
      top: 33%;
    }

    &:nth-of-type(6) {
      left: 56%;
      top: 45%;
    }

    &:nth-of-type(7) {
      left: 71%;
      top: 47%;
    }

    &:nth-of-type(8) {
      left: 74%;
      top: 50%;
    }

    &:nth-of-type(9) {
      left: 76%;
      top: 55%;
    }

    &:nth-of-type(10) {
      left: 71%;
      top: 55%;
    }

    &:nth-of-type(11) {
      left: 53%;
      top: 61%;
    }

    &:nth-of-type(12) {
      left: 64%;
      top: 63%;
    }

    &:nth-of-type(13) {
      left: 66%;
      top: 67%;
    }

    &:nth-of-type(14) {
      left: 65%;
      top: 72%;
    }

    &:nth-of-type(15) {
      left: 62%;
      top: 73%;
    }
  }
}
</style>
